<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="计划名" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name">
              <a-input v-model="model.name" placeholder="请输入计划名"  ></a-input>
            </a-form-model-item>
          </a-col>

<!--            <a-col :span="24">-->
<!--              <a-form-model-item label="选择客户" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="customerId">-->
<!--                <j-select-multi-user v-model="model.customerId"  :query-config="selectUserQueryConfig"/>-->
<!--              </a-form-model-item>-->
<!--            </a-col>-->
<!--            <a-col :span="12">选中的用户(v-model):{{ model.customerId }}</a-col>-->
          <a-col :span="24">
            <a-form-model-item label="关联客户" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="customerId">
              <!--              <j-search-select-tag v-model="model.customerId" dict="biz_customer,name,id"  />-->
              <JSelectMultiUser v-model="model.customerId" :query-config="selectUserQueryConfig" :url="kehuurl"/>
            </a-form-model-item>
          </a-col>
<!--          <a-col :span="24">-->
<!--            <a-form-model-item label="客户" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="customerId">-->
<!--              <j-search-select-tag v-model="model.customerId" dict="biz_customer,name,id"  />-->
<!--            </a-form-model-item>-->
<!--          </a-col>-->
          <a-col :span="24">
            <a-form-model-item label="执行人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="executor">
              <j-select-user-by-dep v-model="model.executor" :multi="true" />
            </a-form-model-item>
          </a-col>
<!--          <a-col :span="24">-->
<!--            <a-form-model-item label="执行人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="executor">-->
<!--              <a-input v-model="model.executor" placeholder="请输入执行人"  ></a-input>-->
<!--            </a-form-model-item>-->
<!--          </a-col>-->
          <a-col :span="24">
            <a-form-model-item label="拜访目的" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="purposeVisit">
              <j-search-select-tag v-model="model.purposeVisit" dict="vistor_program_objcetive"  />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item
              label="执行时间"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              prop="implementTime"
            >
              <a-date-picker
                style="width: 100%"
                placeholder="请选择执行时间"
                :show-time="true"
                v-model="model.implementTime"
                format="YYYY-MM-DD HH:mm:ss"
                @change="onChange"
                :disabled-date="disabledDate"
              />
            </a-form-model-item>
          </a-col>
<!--          <a-col :span="24">-->
<!--            <a-form-model-item label="执行时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="implementTime">-->
<!--              <j-date placeholder="请选择执行时间" v-model="model.implementTime"  style="width: 100%" :onlyAfter="true" />-->
<!--            </a-form-model-item>-->
<!--          </a-col>-->
          <a-col :span="24">
            <a-form-model-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remark">
              <a-input v-model="model.remark" placeholder="请输入备注"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="提醒" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remind">
              <j-search-select-tag v-model="model.remind" dict="vistor_program_remind" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24" v-if="isYanqi">
            <a-form-model-item label="延期原因" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="extensionReason">
              <j-search-select-tag v-model="model.extensionReason" dict="vistor_extension_reason"  />
              <!--                        <a-input v-model="model.extensionReason" placeholder="请输入延期原因"  ></a-input>-->
            </a-form-model-item>
          </a-col>
          <a-col :span="24" v-if="isYanqi">
            <a-form-model-item label="延期备注" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="extensionRemark">
              <a-input v-model="model.extensionRemark" placeholder="请输入延期备注"  ></a-input>
            </a-form-model-item>
          </a-col>
<!--          <a-col :span="24">-->
<!--            <a-form-model-item label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="state">-->
<!--              <j-search-select-tag v-model="model.state" dict="vistor_program_type"  />-->
<!--            </a-form-model-item>-->
<!--          </a-col>-->
<!--          <a-col :span="24">-->
<!--            <a-form-model-item label="延期时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="extensionTime">-->
<!--              <j-date placeholder="请选择延期时间" v-model="model.extensionTime"  style="width: 100%" />-->
<!--            </a-form-model-item>-->
<!--          </a-col>-->
<!--          <a-col :span="24">-->
<!--            <a-form-model-item label="延期原因" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="extensionReason">-->
<!--              <a-input v-model="model.extensionReason" placeholder="请输入延期原因"  ></a-input>-->
<!--            </a-form-model-item>-->
<!--          </a-col>-->
<!--          <a-col :span="24">-->
<!--            <a-form-model-item label="延期备注" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="extensionRemark">-->
<!--              <a-input v-model="model.extensionRemark" placeholder="请输入延期备注"  ></a-input>-->
<!--            </a-form-model-item>-->
<!--          </a-col>-->
<!--          <a-col :span="24">-->
<!--            <a-form-model-item label="创建时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="crateTime">-->
<!--              <j-date placeholder="请选择创建时间" v-model="model.crateTime"  style="width: 100%" />-->
<!--            </a-form-model-item>-->
<!--          </a-col>-->
<!--          <a-col :span="24">-->
<!--            <a-form-model-item label="是否删除" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="isDelete">-->
<!--              <a-input-number v-model="model.isDelete" placeholder="请输入是否删除(0.未删除 1.已删除)" style="width: 100%" />-->
<!--            </a-form-model-item>-->
<!--          </a-col>-->
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>
import JSelectUserByDep from '@/components/jeecgbiz/JSelectUserByDepCustom'
import JSelectMultiUser from '@/components/jeecgbiz/JSelectMultiUserCustom'

  import { httpAction, getAction } from '@/api/manage'
  import { validateDuplicateValue } from '@/utils/util'
import moment from 'moment'

  export default {
    name: 'VisitorProgramForm',
    components: {
      JSelectUserByDep,
      JSelectMultiUser
    },
    props: {
      // isYanqi:{
      //   type: Boolean,
      //   default: false,
      //   required: false
      // },
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        isYanqi:false,
        kehuurl:'/customer/customer/lists?filed=2',
        // 选择用户查询条件配置
        selectUserQueryConfig: [
          {key: 'phone', label: '电话'},
        ],
        model:{
         },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        validatorRules: {
           name: [
              { required: true, message: '请输入计划名!'},
             {
               validator: (rule, value, callback) =>{
                 let valuetrim = value.trim()
                 if(!valuetrim){
                   callback(new Error("不能为空"))
                 }else{
                   callback()

                 }



               },
               message: '不能为空',
               trigger: ['blur']
             }
           ],
           customerId: [
              { required: true, message: '请选择客户!'},
           ],
           executor: [
              { required: true, message: '请选择执行人!'},
           ],
          implementTime: [
            { required: true, message: '请选择执行时间!'},
          ],
          remind: [
            { required: false, message: '提醒时间不能为空!' },
            {
              validator: (rule, value, callback) => {
                //表单上面填的提醒时间
                let tixingTime = null
                //系统当前时间
                let nowTime = new Date().getTime()

                if (this.model.implementTime) {
                  tixingTime = this.model.implementTime.replace(new RegExp('-', 'g'), '/')
                } else {
                  callback(new Error('请先选择执行时间'))
                }

                switch (value) {
                  case '1':
                    let m15 = 15 * 60 * 1000
                    if ((new Date(tixingTime).getTime() - m15) > nowTime) {
                      callback()
                    } else {
                      callback(new Error('提醒时间不能早于执行时间'))
                    }
                    break
                  case '2':
                    let h1 = 60 * 60 * 1000
                    if ((new Date(tixingTime).getTime() - h1) > nowTime) {
                      callback()
                    } else {
                      callback(new Error('提醒时间不能早于执行时间'))
                    }
                    break
                  case '3':
                    let d1 = 24 * 60 * 60 * 1000
                    if ((new Date(tixingTime).getTime() - d1) > nowTime) {
                      callback()
                    } else {
                      callback(new Error('提醒时间不能早于执行时间'))
                    }
                    break
                  case '4':
                    let w1 = 7 * 24 * 60 * 60 * 1000
                    if ((new Date(tixingTime).getTime() - w1) > nowTime) {
                      callback()
                    } else {
                      callback(new Error('提醒时间不能早于执行时间'))
                    }
                    break
                  default:
                    callback()
                    break
                }
              },
              trigger: ['change']
            }
          ],
        },
        url: {
          add: "/visitorprogram/visitorProgram/add",
          edit: "/visitorprogram/visitorProgram/edit",
          queryById: "/visitorprogram/visitorProgram/queryById"
        }
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
    },
    created () {
       //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
    },
    methods: {
      //执行时间不可选今日之前
      disabledDate(current) {
        return current && current < moment().subtract(1, 'days').endOf('day')
      },
      isYanqiMeth(){
        this.isYanqi = true
      },
      // disabledDate(current){
      //   return current && current < moment().subtract(1, 'days').endOf('day')
      //   // return current && current < moment().endOf('day');
      //   // const disabledDate = current => {
      //   //   return current && current < moment().subtract(1,"days").endOf('day');
      //   // };
      //
      // },
      //选择计划时间
      onChange(value, dateString) {
        console.log('Selected Time: ', value);
        console.log('Formatted Selected Time: ', dateString);
        this.model.implementTime = dateString
      },
      add () {
        this.edit(this.modelDefault);
      },
      edit (record) {
        this.model = Object.assign({}, record);
        this.visible = true;
      },
      submitForm () {
        const that = this;
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if(!this.model.id){
              httpurl+=this.url.add;
              method = 'post';
            }else{
              httpurl+=this.url.edit;
               method = 'put';
            }
            httpAction(httpurl,this.model,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
            })
          }

        })
      },
    }
  }
</script>